<template>
  <div class="dashboard-container">
    <div class="dashboard-count">

      <el-row :gutter="20">
        <el-col :span="18">
          <div class="grid-content counts">
            <div class="count-top-left count-item">
              <div class="worksCount-time">
                <span class="count-title">工单统计66666</span>
                <span class="count-time">2023.08.01 ~ 2023.08.12</span>
              </div>
              <div class="worksNumber">
                <div class="work-item">
                  <span class="num">10</span>
                  <span>工单总数（个）</span>
                </div>
                <div class="work-item">
                  <span class="num">10</span>
                  <span>完成工单（个）</span>
                </div>
                <div class="work-item">
                  <span class="num">10</span>
                  <span>进行总数（个）</span>
                </div>
                <div class="work-item">
                  <span class="num">10</span>
                  <span>取消总数（个）</span>
                </div>
              </div>
            </div>
            <div class="count-top-right count-item">
              <div class="saleCount-time">
                <span class="count-title">销售统计</span>
                <span class="count-time">2023.08.01 ~ 2023.08.12</span>
              </div>
              <div class="saleNumber">
                <div class="sale-item">
                  <span class="num">10</span>
                  <span>订单数（个）</span>
                </div>
                <div class="sale-item">
                  <span class="num">10</span>
                  <span>销售额（个）</span>
                </div>

              </div>
            </div>
          </div>
          <div class="chart">
            <div class="chart-header">
              <span class="chart-title">销售数据</span>
              <span class="chart-time">2023.08.01 ~ 2023.08.12</span>
              <!-- tab切换 -->
              <el-tabs>
                <el-tab-pane label="周">
                  <div class="chart-box">
                    <div
                      id="main1"
                      style="width: 450px; height: 278px;"
                    />
                    <div
                      id="main2"
                      style="width: 450px; height: 278px;"
                    />
                  </div>
                </el-tab-pane>
                <el-tab-pane label="月">
                  <div id="chart-3">ww</div>
                  <div id="chart-4">rr</div>
                </el-tab-pane>
                <el-tab-pane label="年">
                  <div id="chart-5">ww</div>
                  <div id="chart-6">rr</div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-line">

            <div class="worksCount-time">
              <span class="count-title">工单统计</span>
              <span class="count-time">2023.08.01 ~ 2023.08.12</span>
            </div>

            <!-- 排行 -->
            <div class="top-box">
              <el-row v-for="item in 10" :key="item" class="row">
                <el-col :span="5">
                  <div class="">1212</div>
                </el-col>
                <el-col :span="13">
                  <div class="">1212</div>
                </el-col>
                <el-col :span="6">
                  <div class="">1212</div>
                </el-col>
              </el-row>
            </div>

          </div>
        </el-col>
      </el-row>
    </div>

    <div class="dashboard-bottom">
      <el-row :gutter="20">
        <el-col :span="14">
          <div class="paterners">111</div>
        </el-col>
        <el-col :span="10">
          <div class="watch">222</div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts'

export default {
  name: 'Dashboard',
  data() {
    return {}
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {

  },
  mounted() {
    this.initData1()
    this.initData2()
  },
  methods: {
    initData1() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main1'))

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '销售额趋势图',
          textAlign: 'center', // 将标题居中显示
          left: '50%' // 将标题水平居中
        },
        tooltip: {},

        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    initData2() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main2'))

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '销售额分布',
          textAlign: 'center', // 将标题居中显示
          left: '50%' // 将标题水平居中
        },
        tooltip: {},

        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  background-color: #f8fafd;
  height: 100%;
  box-sizing: border-box;

}

.counts {
  width: 100%;
  display: flex;

  .count-item {
    flex: 1;
    border-radius: 20px;
    height: 166px;
    padding: 20px;
  }

  .count-top-left {
    margin-right: 20px;
    background-color: tan;
  }

  .count-top-right {
    background-color: darkgoldenrod;
  }

}

.worksNumber {
  font-size: 12px;
  display: flex;
  justify-content: space-around;

  .work-item {
    flex: 1;
    display: flex;
    height: 108px;
    flex-direction: column;
    justify-content: center;

  }
}

.num {
  margin-bottom: 12px;
  font-size: 36px;
}

.count-top-right {
  display: flex;
  flex-direction: column;

  .saleCount-time {
    height: 20px;
  }

  .saleNumber {
    display: flex;
    height: 100%;
    justify-content: space-around;

    .sale-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 12px;
    }
  }
}

.count-title {
  font-weight: bold;
  font-size: 16px;
  margin-right: 16px;
}

.count-time {
  font-size: 14px;
  color: #ccc;
}

.chart-header {
  display: flex;
  height: 26px;

  .chart-time {
    margin-left: 18px;
    margin-right: 460px;
  }
}

.top-line {
  padding: 20px;
  background-color: darkcyan;
  height: 552px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;

  .top-box {
    display: flex;
    justify-content: space-between;
    flex: 1;
    flex-direction: column;
    margin-top: 16px;
    padding: 8px;
    padding-top: 16px;

    .row {
      margin-bottom: 22px;
    }
  }
}

.dashboard-bottom {
  height: 353px;
  margin-top: 20px;

  .paterners {
    background-color: seagreen;
    height: 353px;
    border-radius: 20px;
  }

  .watch {
    background-color: gold;
    height: 353px;
    border-radius: 20px;
  }

}

// 图表
::v-deep .chart {
  padding: 20px;
  margin-top: 20px;
  background-color: #fff;
  // background-color: red;
  border-radius: 20px;
  height: 366px;

  .el-tabs__nav-wrap::after {
    height: 0;
  }

  .el-tabs__nav.is-top {
    background-color: #f8faff;
    width: 150px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    border-radius: 8px;
  }

  .el-tabs__item.is-top {
    color: #ccc;
    height: 34px;
    line-height: 34px;
    padding: 0;
    margin: 0 10px;
    flex: 1
  }

  .el-tabs__active-bar {
    height: 0;
  }

  .el-tabs__item.is-top.is-active {
    color: black;
    background-color: #fff;
    height: 25px;
    line-height: 25px;
    width: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    // padding: 0 10px;
    border-radius: 8px;
  }

  .el-tabs__item:hover {
    cursor: pointer;
    color: black;
  }

  .el-tab-pane {
    color: red;
  }

  .el-tabs.el-tabs--top {
    position: relative;
  }

  .el-tabs__content {
    position: absolute;
    left: -721px;
    height: 278px;
    width: 873px;
    // background-color: pink;
    border-radius: 20px;
  }

}

.chart-box {
  display: flex;
}
</style>
